(function () {
  // 步骤3：创建echarts实例
  let myChart = echarts.init(document.querySelector(".box9"));

  // 步骤4：定义配置（指定图表的配置项和数据）
  let option = {
    // color: ["red", "pink", "blue", "yellow", "green"],
    title: {
      text: "饼图",
      textStyle: {
        color: "#fff",
        fontSize: 20,
        fontWeight: "400",
      },
      // left: 10,
      // top: 20,
      x: "10",
      y: "10",
    },
    legend: [
      {
        //   top: "20",
        data: ["rose 1"],
        icon: "circle",
        x: "10%",
        y: "15%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 2"],
        icon: "circle",
        x: "25%",
        y: "15%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 3"],
        icon: "circle",
        x: "40%",
        y: "15%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 4"],
        icon: "circle",
        x: "55%",
        y: "15%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 5"],
        icon: "circle",
        x: "10%",
        y: "30%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
    ],

    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    tooltip: {
      //触发类型 item 数据项触发 axis坐标轴触发
      trigger: "item",
      backgroundColor: "#ccc",
    },
    series: [
      {
        startAngle: 180,
        // endAngle: 90,
        name: "Nightingale Chart",
        type: "pie",
        radius: [40, 100],
        center: ["45%", "45%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          {
            value: 10,
            itemStyle: {
              color: "transparent",
            },
          },
          {
            value: 10,
            itemStyle: {
              color: "transparent",
            },
          },
          {
            value: 10,
            itemStyle: {
              color: "transparent",
            },
          },
          {
            value: 10,
            itemStyle: {
              color: "transparent",
            },
          },
          {
            value: 10,
            itemStyle: {
              color: "transparent",
            },
          },
          {
            name: "rose 1",
            value: 2,
            itemStyle: {
              color: "#50ebb7",
              borderRadius: 0,
            },
          },
          {
            name: "rose 2",
            value: 4,
            itemStyle: {
              color: "#52b0c7",
              borderRadius: 0,
            },
          },
          {
            name: "rose 3",
            value: 6,
            itemStyle: {
              color: "#10758f",
              borderRadius: 0,
            },
          },
          {
            name: "rose 4",
            value: 8,
            itemStyle: {
              color: "#16e4a6",
              borderRadius: 0,
            },
          },
          {
            name: "rose 5",
            value: 10,
            itemStyle: {
              color: "#03422f",
              borderRadius: 0,
            },
          },
          //   { value: 40, name: "rose 1" },
          //   { value: 38, name: "rose 2" },
          //   { value: 32, name: "rose 3" },
          //   { value: 30, name: "rose 4" },
          //   { value: 28, name: "rose 5" },
        ],
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  //   window.onresize = function () {
  //     myChart.resize();
  //   };
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
